<template>
	<view>
		<map id='map' style="width: 100vw;height: 59vh;" :longitude='longitude' :latitude='latitude'
			:polyline="polyline" :markers="markers" :scale='scale'></map>
		<view class="time_km">
			<view class="time_km_item1">
				<text v-if='duration<3600'>{{Math.ceil(duration / 60)}}分钟</text>
				<text v-else>{{Math.floor(duration / 3600)}}小时{{Math.ceil(duration%3600/60)}}分钟</text>
			</view>
			<view class="time_km_item2">
				<text v-if='distance<1000'>{{distance}}米</text>
				<text v-else>{{(distance / 1000).toFixed(1)}}公里</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			longitude: {
				type: Number,
				default: 0
			},
			latitude: {
				type: Number,
				default: 0
			},
			markers: {
				type: Array,
				default: []
			},
			data: {
				type: Object,
				default: {}
			}
		},
		data() {
			return {
				polyline: [],
				scale: 16,
				distance: 0,
				duration: 0,
				colorList: ['#fa3534', '#ff9900', '#19be6b', '#909399'], //彩虹蚯蚓线
				map: null,
			}
		},
		onReady() {
			this.map = uni.createMapContext("map", this);
		},
		watch: {
			data: {
				handler(newVal, oldVal) {
					console.log('newVal', newVal)
					this.dealData(newVal)
				},
				immediate: true,
				deep: true
			}
		},
		onLoad() {

		},
		methods: {
			dealData(data) {
				var points = [];
				if (data.paths && data.paths[0] && data.paths[0].steps) {
					var steps = data.paths[0].steps;
					for (var i = 0; i < steps.length; i++) {
						var poLen = steps[i].polyline.split(';');
						for (var j = 0; j < poLen.length; j++) {
							points.push({
								longitude: parseFloat(poLen[j].split(',')[0]),
								latitude: parseFloat(poLen[j].split(',')[1])
							})
						}
					}

				}

				if (data.paths && data.paths[0]) {
					this.distance = Number(data.paths[0].distance)
					this.duration = Number(data.paths[0].duration)
				}

				if (points.length > 0) {
					this.map.includePoints({
						padding: [70],
						points: points
					})
					this.polyline = [{
						points: points,
						width: 5,
						colorList: [this.colorList[Math.floor((Math.random() * this.colorList
							.length))]],
						arrowLine: true
					}];
				}
			}
		}
	}
</script>

<style scoped lang="less">
	.time_km {
		width: 100vw;
		height: 10vh;
		background-color: #ffffff;
		position: absolute;
		left: 0;
		bottom: 0;
		z-index: 10;
		padding: 0 20rpx 0 20rpx;
	}

	.time_km_item1,
	.time_km_item2 {
		margin-top: 20rpx;
		text-align: center;
	}

	.time_km_item1 {
		font-size: 32rpx;
		font-weight: bold;
	}
</style>
